<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Mathpad Documentation</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="description" content="Documentation for Mathpad, the innovative open source keypad for students and
  professionals in STEM fields">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <link rel="icon" href="_media/favicon.ico">
  <link
    rel="stylesheet"
    href="//cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/dist/style.min.css"
    title="docsify-darklight-theme"
    type="text/css"
  />
  <link
  rel="stylesheet"
  href="//cdn.jsdelivr.net/npm/prism-themes@1/themes/prism-one-light.min.css"
  />
  <style>
    /* Search input box */
    .search input {
      font-size: 16px; /* Adjust this value */
      width: 80%; /* 80% of container width */
      height: 30px;
      padding: 0px 0px;
    }
    /* Search placeholder text */
    .search input::placeholder {
      font-size: 16px; /* Adjust this value */
    }
    .key-modifier {
      display: inline-block;
      padding: 0px 6px;
      margin: 0 2px;
      border-radius: 3px;
      font-weight: bold;
      font-family: sans-serif;
      font-size: 0.9em;
      color: white;
      text-shadow: 0 1px 0 rgba(0,0,0,0.2);
      box-shadow: 0 1px 2px rgba(0,0,0,0.2);
      line-height: 1.4; /* Added to help with vertical alignment */
    }
    .modifier-right {
      color: #047d91;
      background-color: #94edff; /* Blue */
    }
    .modifier-bottom {
      padding: 0px 12px;
      color: #2c9104;
      background-color: #9ffac6; /* Green */
    }
    .modifier-center {
      padding: 0px 12px;
      color: #6c0096;
      background-color: #ecbfff; /* Purple */
    }
    .key-normal {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 1.1em;
      height: 1.1em;
      margin: 0px 2px;
      background-color: #ffffff;
      border: 1px solid #000000;
      border-radius: 3px;
      font-family: "Cambria Math";
      text-align: center;
      box-sizing: border-box;
      vertical-align: middle; /* Add this to align with surrounding text */
      position: relative; /* Add this for more control */
    }

    .key-multitap {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 1.37em;
      height: 1.37em;
      margin: 0px -2.5px;
      background-color: #ffffff;
      border: 1px solid #000000;
      border-radius: 3px;
      font-family: "Cambria Math";
      font-size: 0.8em;
      text-align: center;
      box-sizing: border-box;
      vertical-align: middle; /* Add this to align with surrounding text */
      position: relative; /* Add this for more control */
    }
    .key-combination {
      white-space: nowrap;
    }
    /* Symbol Grid Layout */
    .symbols-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 20px;
      margin: 20px 0;
    }
    /* Symbol Card Styling */
    .symbol-card {
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    /* Symbol Display */
    .symbol {
      font-size: 3.5rem;
      font-weight: normal;
      margin-bottom: 10px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: "Cambria Math", "STIX Two Math", "STIX", "Asana Math", "Cambria", serif;
    }
    /* Details Container */
    .details {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 10px;
    }
    /* Key Combination */
    .key-combo {
      background: #f1f1f1;
      padding: 10px 10px;
      border-radius: 4px;
      font-size: 1.3rem;
      text-align: center;
    }
    /* Symbol Name */
    .name {
      font-size: 1.2rem;
      text-align: center;
      color: #555;
      margin-top: 3px;
      margin-bottom: 12px;
    }

    /* Sidebar width customization */
    .sidebar {
      width: 200px !important;
    }
    
    /* Adjust main content area to account for narrower sidebar */
    .content {
      left: 250px !important;
    }
    
    /* Mobile responsiveness - hide sidebar toggle adjustments */
    @media screen and (max-width: 768px) {
      .sidebar {
        width: 250px !important;
        transform: translateX(-250px);
      }
      .sidebar.open {
        transform: translateX(0);
      }
      .content {
        left: 0 !important;
      }
    }
    
    /* Disable zoom on Mathpad logo in main content area only (not sidebar) */
    .content img[src*="mathpad_logo"] {
      cursor: default !important;
      pointer-events: none !important;
    }
    
    .content img[src*="mathpad_logo"]:hover {
      cursor: default !important;
      transform: none !important;

  </style>
</head>
<body>
  <div id="app"></div>

  <!-- Config -->
  <script>
    window.$docsify = {
      name: 'Mathpad documentation',
      auto2top: true,
      loadSidebar: true,
      subMaxLevel: 1,
      notFoundPage: true,
      autoHeader: false,
      //routerMode: 'history',
      catchPluginErrors: true,
      logo: '_media/mathpad_logo.svg',
      mergeNavbar: true,
      homepage: 'README.md',
      search: {
        maxAge: 86400000, // Expiration time, the default one day
        paths: 'auto', // or 'auto'
        placeholder: 'Search the docs',
        noData: 'No Results!',
        depth: 6,
        hideOtherSidebarContent: false,
      },
      tabs: {
        persist: true, // default
        sync: true, // default
        theme: 'classic', // default
        tabComments: true, // default
        tabHeadings: true // default
      },
      'flexible-alerts': {
        style: 'flat'
      },
      latex: {
        inlineMath: [['$', '$'], ['\\(', '\\)']], // default
        displayMath: [['$$', '$$']],               // default
      },

      darklightTheme: {
        dark: {
          // Firmware plugin dark theme colors
          firmware_download_plugin_container_background: '#1c2128',
          firmware_download_plugin_container_border: '#30363d',
          firmware_download_plugin_container_shadow: 'rgba(0,0,0,0.3)',
          firmware_download_plugin_input_background: '#0d1117',
          firmware_download_plugin_input_color: '#c9d1d9',
          firmware_download_plugin_header_color: '#426a5c',
          firmware_download_plugin_input_border: '#30363d',
          firmware_download_plugin_item_background: '#21262d',
          firmware_download_plugin_item_border: '#30363d',
          firmware_download_plugin_item_hover_background: '#1a4052',
          firmware_download_plugin_text_color: '#58a6ff',
          firmware_download_plugin_text_secondary: '#8b949e'
        },
        light: {
          // Firmware plugin light theme colors (defaults)
          firmware_download_plugin_container_background: 'white',
          firmware_download_plugin_container_border: '#e0e0e0',
          firmware_download_plugin_container_shadow: 'rgba(0,0,0,0.1)',
          firmware_download_plugin_input_background: 'white',
          firmware_download_plugin_input_color: '#333',
          firmware_download_plugin_header_color: '#c8ecdf',
          firmware_download_plugin_input_border: '#e0e0e0',
          firmware_download_plugin_item_background: '#f8f9fa',
          firmware_download_plugin_item_border: '#e9ecef',
          firmware_download_plugin_item_hover_background: '#e8f2f8',
          firmware_download_plugin_text_color: '#0f4c75',
          firmware_download_plugin_text_secondary: '#666'
        }
      }
    };
  </script>

  <script>
    window.MathJax = {
      tex: {
        inlineMath: [['$', '$'], ['\\(', '\\)']],
        displayMath: [['$$', '$$'], ['\\[', '\\]']],
      }
    };
  </script>

  <!-- Docsify v4 -->
  <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>

  <!-- Search plugin -->
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>

  <!-- docsify-tabs (latest v1.x.x) -->
  <script src="https://cdn.jsdelivr.net/npm/docsify-tabs@1"></script>

  <!-- Dark mode / light mode switch plugin-->
  <script
    src="//cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/dist/index.min.js"
    type="text/javascript">
  </script>

  <!-- Image zoom plugin -->
  <script
    src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js">
  </script>

  <!-- Alerts -->
  <script
    src="https://unpkg.com/docsify-plugin-flexible-alerts">
  </script>

  <!-- LaTeX display engine -->
  <script
    src="//cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
  </script>

  <!--  docsify-latex plugin -->
  <script
    src="//cdn.jsdelivr.net/npm/docsify-latex@0">
  </script>

  <!--  Custom interactive LaTeX renderer -->
<script>
  // Hook into Docsify's lifecycle
  window.$docsify.plugins = [].concat(window.$docsify.plugins || [], function(hook) {
    hook.doneEach(function() {
      // This runs after each page is rendered
      const inputElement = document.getElementById('latex-input');
      if (inputElement) {
        inputElement.addEventListener('input', function() {
          const input = this.value;
          const outputDiv = document.getElementById('latex-output');

          // Wrap the input in LaTeX delimiters if needed
          let formattedInput = input;

          // If the input ends with a single backslash, remove it for rendering
          if (formattedInput.endsWith('\\') && !formattedInput.endsWith('\\\\')) {
            formattedInput = formattedInput.slice(0, -1); // Remove the trailing backslash
          }

          // If input doesn't already have delimiters, add them
          if (!formattedInput.startsWith('$') && !formattedInput.startsWith('\\(') &&
              !formattedInput.startsWith('$$') && !formattedInput.startsWith('\\[')) {
            // For display math mode
            formattedInput = '$$' + formattedInput + '$$';
          }

          // Set the content with proper LaTeX formatting
          outputDiv.innerHTML = formattedInput;

          // Trigger MathJax to render the content
          if (window.MathJax) {
            MathJax.typesetPromise([outputDiv]).catch(function(err) {
              outputDiv.innerHTML = 'Error rendering LaTeX: ' + err.message;
            });
          }
        });
      }
    });
  });
</script>


<!--  Custom modifier keys rendering -->
  <script>
    // Extend your existing Docsify plugins
    window.$docsify.plugins = [].concat(window.$docsify.plugins || [], function(hook) {
      // Keep your existing hook.doneEach function
      hook.doneEach(function() {
        // Initialize symbol filtering if on symbols page
        if (window.location.hash.includes('symbols')) {
          initializeSymbolFiltering();
        }
      });

      // Add new hook.afterEach for key replacement
      hook.afterEach(function(html) {
        // Handle <keycombo> tags first
        html = html.replace(/<keycombo>(.*?)<\/keycombo>/g, function(match, contents) {
          // Start with the outer span for key-combination
          let result = '<span class="key-combination">';

          // Process the contents to handle [R], [C], [B] and [char] patterns
          contents = contents
            .replace(/\[R\]/g, '<span class="key-modifier modifier-right">R</span>')
            .replace(/\[B\]/g, '<span class="key-modifier modifier-bottom">B</span>')
            .replace(/\[C\]/g, '<span class="key-modifier modifier-center">C</span>')
            // Handle any single character within brackets as a normal key
            .replace(/\[(.?)\]/g, '<span class="key-normal">$1</span>')
            // Handle x<digit> within brackets as a multitap indicator
            .replace(/\[(x\d?)\]/g, '<span class="key-multitap">$1</span>');

          result += contents + '</span>';
          return result;
        });

        // Then handle the standalone modifier keys for backward compatibility
        return html
          .replace(/\[R\]/g, '<span class="key-modifier modifier-right">R</span>')
          .replace(/\[B\]/g, '<span class="key-modifier modifier-bottom">B</span>')
          .replace(/\[C\]/g, '<span class="key-modifier modifier-center">C</span>');
      });
    });
  </script>

  <!-- Firmware downloader -->
  <script src="./firmware-download-plugin.js"></script>

  <!-- Symbol filtering functionality -->
  <script>
    function initializeSymbolFiltering() {
      // Wait a bit for the page to fully render
      setTimeout(() => {
        const filterButtons = document.querySelectorAll('.filter-btn');
        const sections = document.querySelectorAll('h2, h3');
        
        if (filterButtons.length === 0) return;

        // Add data-category attributes to sections based on their text content
        sections.forEach(section => {
          const text = section.textContent.toLowerCase();
          let category = 'misc';
          
          if (text.includes('lowercase greek')) category = 'lowercase-greek';
          else if (text.includes('uppercase greek')) category = 'uppercase-greek';
          else if (text.includes('operator') || text.includes('arithmetic')) category = 'operators';
          else if (text.includes('relation') || text.includes('comparison')) category = 'relations';
          else if (text.includes('arrow')) category = 'arrows';
          else if (text.includes('set') || text.includes('logic')) category = 'sets';
          else if (text.includes('calculus') || text.includes('integral')) category = 'calculus';
          else if (text.includes('accent')) category = 'accents';
          
          section.setAttribute('data-category', category);
          
          // Also mark the following content until next section
          let nextElement = section.nextElementSibling;
          while (nextElement && !nextElement.matches('h1, h2, h3')) {
            nextElement.setAttribute('data-category', category);
            nextElement = nextElement.nextElementSibling;
          }
        });

        // Add click event listeners to filter buttons
        filterButtons.forEach(button => {
          button.addEventListener('click', function() {
            const category = this.getAttribute('data-category');
            
            // Update active button
            filterButtons.forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');
            
            // Show/hide sections based on category
            const allElements = document.querySelectorAll('[data-category]');
            allElements.forEach(element => {
              if (category === 'all' || element.getAttribute('data-category') === category) {
                element.style.display = '';
              } else {
                element.style.display = 'none';
              }
            });
          });
        });
      }, 500);
    }
  </script>

</body>
</html>
